<template>
    <view>
        <view class="home_search_nav">
            <view :style="{ height: statusBarHeight }" class="status_bar"></view>
            <view class="home_nav_content">
                <label style="margin-left: 44rpx; color: #000000; font-size: 44rpx; font-weight: 600">圈子</label>
                <view @click="goToSearch" class="search_bar">
                    <image
                        style="height: 28rpx; width: 28rpx; margin-left: 18rpx"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search.png"
                    ></image>
                    <label style="margin-left: 10rpx; color: #999999; font-size: 22rpx">搜索食品/话题/动态/用户</label>
                </view>
            </view>
        </view>
        <view>
            <view :style="{ height: statusBarHeight }" class="status_bar"></view>
            <view class="uni_navbar__placeholder_view" />
        </view>
    </view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
export default {
    name: 'community-nav-search',
    data() {
        return {
            statusBarHeight: statusBarHeight,
        };
    },
    methods: {
        goToSearch() {
            uni.navigateTo({
                url: '/packageHome/pages/search/search',
            });
        },
    },
};
</script>

<style scoped>
.home_search_nav {
    position: fixed;
    background-color: #f6f6f6;
    width: 100%;
    z-index: 998;
}
.status_bar {
    height: 20px;
    width: 100%;
}
.home_nav_content {
    height: 88rpx;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.search_bar {
    margin-left: 32rpx;
    height: 56rpx;
    background-color: #ffffff;
    border-radius: 40rpx;
    border: 2rpx solid #234941;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 400rpx;
}
.uni_navbar__placeholder_view {
    height: 88rpx;
}
</style>
